import 'package:flutter/material.dart';
import 'package:love_app/common/su.dart';
import 'package:love_app/common/su_icon.dart';
import 'package:love_app/enum/bottom_appbar.dart';
import 'package:love_app/providers/bottom_appbar_check_model.dart';
import 'package:love_app/providers/community_provider.dart';
import 'package:love_app/providers/share_provider.dart';
import 'package:love_app/pages/bottom_appbar/ui/navigation_barItem.dart';
import 'package:love_app/pages/community/community_page.dart';
import 'package:love_app/pages/home_page/home_page.dart';
import 'package:love_app/pages/mine/mine_page.dart';
import 'package:provider/provider.dart';

/// 自定义底部导航栏
class MyBottomAppbar extends StatefulWidget {
  @override
  _MyBottomAppbarState createState() => _MyBottomAppbarState();
}

class _MyBottomAppbarState extends State<MyBottomAppbar> {

  // 维护一个索引
  int currentIndex = 0;
  BottomAppbarCheckModel _bottomAppbarCheckModel;
  ShareProvider _shareProvider;

  // 维护选择的导航栏的索引
  Map onClickStatus = {
    'home': true,
    'shequ': false,
    'mine': false,
  };

  // 导航栏点击的页面
  final List<Widget> pages = [
    HomePage(), // 主页
    CommunityPage(), // 社区
    MinePage(), // 个人
  ];

  Color _iconColor; // 图标颜色，男生女生颜色不同

  @override
  void initState() {
    currentIndex = 0; // 索引初始化
    super.initState();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _shareProvider = Provider.of<ShareProvider>(context, listen: false);
    _bottomAppbarCheckModel = Provider.of<BottomAppbarCheckModel>(context, listen: false);
  }

  @override
  Widget build(BuildContext context) {
    _iconColor = _shareProvider.textColor;
    return Scaffold(
      bottomNavigationBar: _bottomAppBar(),
      body: IndexedStack(
        index: currentIndex,
        children: pages,
      ),
    );
  }

  // 自定义底部导航栏
  BottomAppBar _bottomAppBar() {
    return BottomAppBar(
      color: Color.fromRGBO(250, 247, 248, 1),
      elevation: 0.0,
      child: Container(
        width: Su().w(750),
        child: _buildMyBottomAppbar(),
      ),
    );
  }

  // 构建底部导航栏
  Widget _buildMyBottomAppbar() {
    return Container(
      height: Su().h(117),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          _clipPath(),
          _buildItem(),
        ],
      ),
    );
  }

  // 不规则容器
  Widget _clipPath() {
    return ClipPath(
      clipper: BotttomClipper(),
      child: Container(
        color: Colors.white,
        height: Su().h(28),
      ),
    );
  }

  // 构建每一个item
  Widget _buildItem() {
    return Container(
      color: Colors.white,
      height: Su().h(89),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          _homeItem(),
          _communityItem(),
          _mineItem(),
        ],
      ),
    );
  }

  // homePageItem
  Widget _homeItem() {
    return Container(
      width: Su().w(250),
      child: InkWell(
        onTap: () {
          setState(() {
            currentIndex = 0;
            _bottomAppbarCheckModel.check(BottomAppBarType.homePage);
          });
        },
        child: _homeItemColumn(),
      ),
    );
  }

  // homePageItem对应的内容
  Widget _homeItemColumn() {
    return Column(
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        Icon(
          SuIcon.home,
           color: _bottomAppbarCheckModel.homePage ? _iconColor : Color.fromRGBO(221, 221, 221, 1),
           size: Su().w(42),
        ),
        Text(
          '首页',
          style: TextStyle(
            color: _bottomAppbarCheckModel.homePage
                ? _iconColor
                : Color.fromRGBO(221, 221, 221, 1),
          ),
        ),
      ],
    );
  }

  // communityItem
  Widget _communityItem() {
    return Container(
      width: Su().w(250),
      child: InkWell(
        onTap: () {
          setState(() {
            currentIndex = 1;
            _bottomAppbarCheckModel.check(BottomAppBarType.communityPage);
          });
        },
        child: _communityColumn(),
      ),
    );
  }

  // communityItem对应的内容
  Widget _communityColumn() {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Icon(
          SuIcon.community,
           color: _bottomAppbarCheckModel.communityPage ? _iconColor : Color.fromRGBO(221, 221, 221, 1),
           size: Su().w(42),
        ),
        Text(
          '社区',
          style: TextStyle(
            color: _bottomAppbarCheckModel.communityPage
                ? _iconColor
                : Color.fromRGBO(221, 221, 221, 1),
          ),
        ),
      ],
    );
  }

  // _mineItem
  Widget _mineItem() {
    return Container(
      width: Su().w(250),
      child: InkWell(
        onTap: () {
          setState(() {
            currentIndex = 2;
            _bottomAppbarCheckModel.check(BottomAppBarType.minePage);
          });
        },
        child: _mineItemColumn(),
      ),
    );
  }

  // _mineItemColumn对应的内容
  Widget _mineItemColumn() {
    return Column(
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        Icon(
          SuIcon.smile,
           color: _bottomAppbarCheckModel.minePage ? _iconColor : Color.fromRGBO(221, 221, 221, 1),
           size: Su().w(42),
        ),
        Text(
          '我的',
          style: TextStyle(
            color: _bottomAppbarCheckModel.minePage
                ? _iconColor
                : Color.fromRGBO(221, 221, 221, 1),
          ),
        ),
      ],
    );
  }
}
